<template>
  <div class="vote-detail">
    <div v-title>{{ title }}</div>

    <div class="img-box">
      <img class="banner" :src="voteListDate[voteId-1].mainImg" alt="">
      <p class="sup-title">{{ voteListDate[voteId-1].subTitle }}</p>
    </div>

    <div class="flapper">
      <div class="fl">
        <img v-if="rank === 1" class="rank" src="../../../../images/activity/no1.png" alt="">
        <img v-else-if="rank === 2" class="rank" src="../../../../images/activity/no2.png" alt="">
        <img v-else-if="rank === 3" class="rank" src="../../../../images/activity/no3.png" alt="">
        <span v-else="rank >= 4" class="rank-flapper">{{ rank }}</span>
        <span>排名：</span>
        <span class="c-orange">NO.{{ rank }}</span>
      </div>
      <div class="fr">
        <span class="c-orange"></span><span class="c-orange">{{ vote }}</span>票
      </div>
    </div>

    <div class="way-detail">
      <h1>方案详情</h1>
      <div class="long-hr"></div>
      <div class="short-hr"></div>
      <h2>{{ voteListDate[voteId-1].supTitle }}</h2>
    </div>

    <div :class="{'detail-con': true}" v-html="voteListDate[voteId-1].detail">
    </div>

    <div class="vote-footer">
      <div class="con" v-if="!ifEnd">
        <span @click="toVote" :class="{'vote-submit': true, 'vote-submit-complete': voteStatus}">{{ todayVoteText }}</span>
        <span @click="toVoteTripleVote" :class="{'more-three': true, 'more-three-complete': moreVoteStatus}">再投3票</span>
      </div>
      <div class="con" v-else>
        <span class="vote-end vote-submit-complete">活动已结束</span>
      </div>
    </div>

    <div v-if="showRule" class="activity-rule">
      <div @click="showRule = false" class="mask"></div>
      <div class="rule-con">
        <img class="window-top" src="./images/window-top.png" alt="">
        <img @click="showRule = false" class="close-rule" src="../../../../images/activity/window-delete-white.png" alt="">

        <div class="rule-text">
          <p>
            为规范网络投票行为，预防恶意投票现象的产生，保障所有参赛者在公平公正的环境下接受网友评选，特制定如下投票规则：
          </p>
          <ul>
            <li>1、投票时间：2017年9月2日00:00至2017年9月4日22:00。</li>
            <li>2、本活动每天每微信号仅可投票一次，仅可选择一个方案进行投票。</li>
            <li>3、点击方案详情中的“再投3票”按钮注册噢啦网，可额外多投3票。每个手机号仅可注册一次。</li>
            <li>4、若发现采用投票器等投票工具或采取其他作弊方式，该IP地址所投票数均计为无效，一经查实，将取消参赛资格。</li>
            <li>5、本次活动对参赛者不产生任何费用。</li>
            <li>6、最终解释权归噢啦网及中山大学岭南（大学）学院MBA中心所有。</li>
          </ul>
        </div>
      </div>
    </div>

    <div v-if="showVoteSuccess" class="vote-success">
      <div @click="showVoteSuccess = false" class="mask"></div>
      <img @click="hideShareEvent" class="share-window" v-if="shareStatus" src="./images/share-window.png" alt="">

      <div v-else class="success-con">
        <img class="window-vote" src="./images/window-vote.png" alt="">
        <img @click="showVoteSuccess = false" class="close-rule" src="../../../../images/activity/window-delete-gray.png" alt="">
        <h3>投票成功</h3>
        <p>你为{{ voteListDate[voteId-1].subTitle }}投出了宝贵的一票</p>

        <!-- 点击分享按钮，3秒之后切换 -->
        <span @click="sharePeople" class="share-btn">分享到朋友圈投票</span>
      </div>
    </div>

    <router-link to="/vote-list">
      <img src="./images/return-home.png" class="link-home">
    </router-link>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui'
  // import { VoteListDate, VoteDetail, VoteWechatLogin, VoteVote, VoteTripleVote } from '@/service/getDate'
  import { VoteListDate, VoteWechatLogin, VoteDetail, VoteTripleVote, VoteVote, VoteCheckToken } from '@/service/getDate'
  import { getUrlKey } from '@/config/utils'
  import WeixinShareWay from '@/config/weixinShare'

  export default {
    name: 'vote-detail',
    data () {
      return {
        title: '噢啦网',
        voteId: '', // list带过来的id
        rank: '', // list带过来的排名
        vote: '', // list带过来的票数
        showRule: false, // 活动规则模块的状态
        voteStatus: true, // 投票按钮的状态
        moreVoteStatus: true, // 再投3票按钮的状态，true为置灰
        ifEnd: false, // 活动是否结束
        showVoteSuccess: false, // 投票成功模块的状态
        voteListDate: '', // 储存静态投票列表数据
        voteToken: '', // 中大MBA投票h5 token
        shareStatus: false, // 分享指示状态
        multiVoted: '', // ‘’没有拉票，有数字表明已经拉票的id
        votedToday: '', // 今天我已投票 1是 0否
        votedThis: '', // 今天是否已投票该项目 1是 0否
        todayVoteText: '' // 投票按钮的文本
      }
    },
    created () {
      this.voteId = this.$route.query.voteId
      // 拿state 传过来的id
      this.getVoteId()
      // 先拿静态数据，再去调接口
      this.voteListDate = VoteListDate()// 拿到静态投票列表数据
      // 检测token，有去拿详情，无去拿token
      this.detectToken()
    },
    methods: {
      weixinShare () {
        // 微信分享链接
        var zhengzeVoteId = 'h5zhongda' + this.voteId + 'votembah5'
        var shareLink = `https://www.oolagongyi.com/activities/#/vote-detail?state=${zhengzeVoteId}`
        WeixinShareWay(shareLink)
      },
      detectToken () {
        this.voteToken = localStorage.getItem('voteToken')

        if (!this.voteToken) {
          this.getWeixinLogin()
          return
        }
        // 检测token
        VoteCheckToken(this.voteToken).then(res => {
          // token 有效，拿详情信息
          if (res.code === 0) {
            // console.log('res', res)
            this.getDetail()
          } else { // 无，去拿token
            this.getWeixinLogin() // 微信登录，拿token
          }
        })
      },
      sharePeople () {
        this.shareStatus = true
        setTimeout(() => {
          this.showVoteSuccess = false
        }, 5000)
      },
      getVoteId () {
        var state = location.href

        if (!this.voteId) {
          // 正则去拿
          state = state.match(/h5zhongda(\d+)votembah5/)
          this.voteId = state[1]
          // console.log('this.voteId', this.voteId)
        }
        this.weixinShare()
      },
      toVoteTripleVote () {
        var self = this
        // self.moreVoteStatus = true
        // self.showVoteSuccess = true
        VoteTripleVote(self.voteToken, self.voteId).then(res => {
          var routerPath
          if (this.multiVoted === 0) {
            routerPath = '/vote-success'
          } else {
            if (self.multiVoted === parseInt(self.voteId)) {
              routerPath = '/vote-success'
            } else {
              routerPath = '/voted'
            }
          }
          // 重新去拿静态数据，用之前都去那一次
          this.voteListDate = VoteListDate()// 拿到静态投票列表数据
          console.log('this.voteListDate', this.voteListDate)

          switch (res.code) {
            case 0:
              // console.log('3')
              self.$router.push({ path: routerPath, query: { voteId: self.voteId, title: self.voteListDate[this.voteId - 1].subTitle } })
              break
            case 302:
              self.$router.push({ path: '/vote-login', query: { voteId: self.voteId } })
              break
            case 411:
              self.weixinLogin()
              break
            default:
              // console.log('2')
              self.$router.push({ path: routerPath, query: { title: self.voteListDate[this.multiVoted - 1].subTitle } })
          }
        })
      },
      toVote () {
        // 如果按钮置灰，就不能点击
        if (this.voteStatus) {
          return
        }
        VoteVote(this.voteToken, this.voteId).then(res => {
          if (res.code === 0) {
            this.voteStatus = true
            this.showVoteSuccess = true
            this.todayVoteText = '本日已投'

            // 检测token，然后再去刷新详情数据
            this.detectToken()
          } else {
            Toast(res.message)
          }
        })
      },
      weixinLogin () {
        // 微信
        // appID = wx3cf647bb48f351d4
        // state = 渠道号
        // redirect_uri = 重定向地址

        // 拿到第一个# 号前面的域名+子目录
        // var yuming = window.location.href.split('#')[0]
        var yuming = 'https://www.oolagongyi.com/activities'
        // console.log('yuming', yuming)

        var REDIRECT_URI = encodeURIComponent(yuming + '/#/vote-detail')

        // 如果id为空，再去拿一次
        this.getVoteId()

        var zhengzeVoteId = 'h5zhongda' + this.voteId + 'votembah5'
        // console.log('stateCode', stateCode)
        location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3cf647bb48f351d4&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_userinfo&state=${zhengzeVoteId}#wechat_redirect`
      },
      getWeixinLogin () {
        this.code = getUrlKey('code') // 拿到微信登录传过来的code
        if (!this.code) {
          // 如果没有code去拿code
          this.weixinLogin()
          return
        }
        VoteWechatLogin(this.code).then(res => {
          if (res.code === 0) {
            this.voteToken = res.info.token
            localStorage.setItem('voteToken', res.info.token)

            // 拿到token之后，拿投票列表的信息
            this.getDetail()
          } else {
            Toast(res.message)
          }
        })
      },
      getDetail () {
        VoteDetail(this.voteToken, this.voteId).then(res => {
          if (res.code === 0) {
            this.vote = res.info.vote
            this.rank = res.info.rank
            this.votedToday = res.info.i_have_voted_today
            this.votedThis = res.info.it_is_voted_today
            this.multiVoted = res.info.multi_voted
            if (res.info.isEnded === 1) {
              this.ifEnd = true
            }

            // 投票按钮的状态判断
            if (this.votedToday === 1) {
              if (this.votedThis === 1) {
                this.todayVoteText = '本日已投'
              } else {
                this.todayVoteText = '已投票'
              }
            } else {
              if (this.votedThis === 1) {
                this.todayVoteText = '本日已投'
              } else {
                this.voteStatus = false
                this.todayVoteText = '投票'
              }
            }

            // 拉票按钮的状态判断
            if (this.multiVoted === 0) {
              // console.log('0')
              this.moreVoteStatus = false
            } else {
              if (this.multiVoted === parseInt(this.voteId)) {
                // console.log('this.multiVoted === this.voteId', this.multiVoted, this.voteId)
                this.moreVoteStatus = false
              } else {
                // console.log('2')
                this.moreVoteStatus = true
              }
            }
          }
        })
      },
      hideShareEvent () {
        this.showVoteSuccess = false
      }
    }
  }
</script>

<style lang="scss">
  .img-box {
    position: relative;
    overflow: hidden;

    .sup-title {
      position: absolute;
      z-index: 2;
      bottom: 10px;
      left: 50%;
      width: 26rem;
      margin-left: -13rem;
      text-align: center;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      color: #fff;
    }
  }
  .detail-con {
    img {
      width: 100%;
    }
    p {
      font-size: 12px;
      margin: 0 0 10px;
    }
  }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.vote-detail {
  height: 100%;
  padding: 10px 15px 104px;
  background-color: #fff;

  .link-home {
    position: fixed;
    bottom: 100px;
    right: 15px;
    width: 43px;
    height: 43px;
  }
  .vote-success {
    position: relative;
    text-align: center;

    .share-window {
      position: fixed;
      top: 0;
      left: 50%;
      width: 76%;
      margin-left: -38%;
      z-index: 2;
    }
    h3 {
      color: #FFB717;
      font-size: 19px;
    }
    p {
      font-size: 13px;
      color: #7C7C7C;
      margin: 7px 30px 20px;
    }
    .window-vote {
      margin-top: 40px;
      margin-bottom: 8.5px;
    }
    .share-btn {
      width: 222px;
      height: 43px;
      color: #fff;
      margin: 0 auto 42px;
      background-color: #FFB717;
      @extend .btn-com;
    }
  }
  .activity-rule {
    ul {
      padding-top: 8px;
      color: #7c7c7c;

      li {
        padding-bottom: 6px;
      }
    }
    .rule-text {
      font-size: 12px;
      padding: 19.5px 15px 16px;
    }
  }
  .close-rule {
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    padding: 12.2px;
  }
  .window-top {
    width: 100%;
  }
  .window-vote {
    display: block;
    width: 162px;
    margin: 0 auto;
  }
  .rule-con, .success-con {
    position: fixed;
    top: 132px;
    left: 50%;
    width: 305px;
    margin-left: -152.5px;
    border-radius: 7px;
    z-index: 2;
    background-color: #fff;
  }
  .mask {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.56;
    background: #000;
    z-index: 1;
  }
  .btn-com {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 43px;
  }
  .vote-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;

    .con {
      margin: 26px 15px 33px;
      overflow: hidden;
    }
    .vote-submit {
      float: left;
      color: #fff;
      width: 43%;
      height: 43px;
      background-color: #FFB717;
      @extend .btn-com;
    }
    .vote-submit-complete {
      color: #fff;
      background-color: #B4BDC6;
    }
    .more-three {
      float: right;
      width: 43%;
      height: 43px;
      color: #FFB717;
      border: 1px solid #FFB717;
      @extend .btn-com;
    }
    .more-three-complete {
      color: #B4BDC6;
      border: 1px solid #B4BDC6;
    }
    .vote-end {
      width: 160px;
      height: 43px;
      margin: 0 auto;
      @extend .btn-com;
    }
  }
  .way-detail {
    text-align: center;

    h2 {
      line-height: 1;
      font-size: 16px;
      padding-bottom: 23px;
    }
    .short-hr {
      height: 1px;
      width: 100px;
      margin: 6.5px auto 9px;
      background-color: #CBD3DB;
    }
    .long-hr {
      height: 1px;
      width: 200px;
      margin: 0 auto;
      background-color: #CBD3DB;
    }
    h1 {
      font-size: 20px;
      color: #FFB717;
      line-height: 1;
      margin: 20px 0 6px;
    }
  }
  .flapper {
    padding: 7px 0 24px;
    border-bottom: 1px solid #DCE0E4;
    overflow: hidden;

    .rank {
      float: left;
      width: 31px;
      margin-right: 5px;
    }
    .rank-flapper {
      float: left;
      display: block;
      width: 31px;
      /* height: 31px; */
      line-height: 31px;
      margin-top: 4px;
      margin-right: 5px;
      background-color: #FFB717;
      font-size: 14px;
      color: #fff;
      text-align: center;
      border-radius: 50%;
    }
    span {
      display: inline-block;
      margin-top: 6px;
      font-size: 16px;
      line-height: 31px;
    }
  }
  .banner {
    width: 100%;
  }
}
</style>
